<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>

<link type="text/css" href="<%=basePath%>/css/oss/iot/monitor_device.css?<%=v%>" rel="stylesheet"/>
<style type="text/css">
	.red-span{
		background: #f44336;
	    padding: 2px 6px;
	    color: #fff;
	    border-radius: 4px;
	    cursor: pointer;
	}
	.span-dis{
		display: inline-block;width: 300px;text-align: left;margin-right: 100px;
		text-overflow: ellipsis;
		white-space: nowrap;overflow: hidden;
	}
	
	.blue-span{
		background: #3499da;
	    padding: 3px 6px;
	    color: #fff;
	    border-radius: 4px;
	}
	
	.blue-span{
		background: #3499da;
	    padding: 3px 6px;
	    color: #fff;
	    border-radius: 4px;
	}
	
	.grey-span{
		background: #aaa;
	    padding: 3px 6px;
	    color: #fff;
	    border-radius: 4px;
	    opacity: 0.9;
	}

</style>
</head>
<body>
	<div>
		
		<div>
			<!-- 左边栏 -->
			<div class="float-left index_theLeft" style="width:170px;">
				<div class="prolist">
					<span>项目列表</span>
				</div>
				<ul class="dashboard-menu scoll main-menu">
					<c:forEach items="${info.data.getData()}" varStatus="status" var="obj">
						<li 
						<c:if test="${id !=null }">
							<c:if test="${obj.id ==id}">
						 	  class="active"
						   </c:if> 
						</c:if>
						<c:if test="${id ==null }">
							<c:if test="${status.index ==0}">
						 	 class="active"
						   </c:if> 
						</c:if>
						  sid="${obj.id}">
	                       <span class="icon-stack-overflow"></span>&nbsp;${obj.name }
	                       <ul class='sub-menu'>
	                       </ul>
	                    </li>
					</c:forEach>
				</ul>
			</div>
			<div class="mapContainer" >
				<div class="app-container">
					<div class="container-layout" style="padding-top: 10px;">
						<div class="box join-device-box video-box-container" style="display: none;"  >
							<div class="device_container"><i class="icon-file-video-o"></i>&nbsp;视频监控</div>
							<div class="video_container" >
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 视频类型  -->
			<div id="template5" class="hide">
				<div class="line" >
					 <div class="x3">
					 	<img class="sensor_img" alt="image" src="<%=basePath%>/image/oss/iot/610.png">
					 	<span class="sensor_name">{0}</span>
					 </div>
					 <div class="x3">
					 	<!--  
					 	<p>当前状态：{1}</p>
					 	<p>更新时间：{2}</p>
					 	-->
					 </div>
					 <div class="x3">
					 	{3}
					 </div>
					 <div class="x3 text-align-center">
					 	<a href="<%=basePath%>/service/iot/video?id={4}&sid={5}">查看详情 <span class="icon-angle-double-right"></span> </a>
					 </div>
				</div>
			</div>
			
		</div>
	</div>
</body>
<script type="text/javascript">

var refleshId = '' ;
var refleshSubId = '' ;

$(document).delegate(".dashboard-menu li","click",function(e){
	if( $(this).hasClass('suli') ){
		refleshId ="" ;
		refleshSubId = $(this).attr("sid") ;

		getVideoInfo(refleshSubId);
	}else{
		$(".dashboard-menu li").removeClass("active");
		$(this).addClass("active");
		refleshSubId = $(this).attr("sid") ;

		getVideoInfo(refleshSubId);
	}
})

//
$(document).delegate(".sub-menu li","click",function(e){
	e.stopPropagation() ;
})

$(function(){
	
	getVideoInfo($(".dashboard-menu li.active").attr("sid"));
})

function getVideoInfo(sid){
	postAjax(localUrl+"/page/video.json?pageSize=300&paged=1", {scene_id:sid},function(data){
		$(".video_container").empty();
		if(isOK(data)){
			$(".video-box-container").show();
			var dataT = data.data.data ;
			dataCache = dataT ;
			for(var i=0;i<dataT.length;i++){
				$(".video_container").append(
						$("#template5").html().format(disvalue(dataT[i].name,15),
								dataT[i].data.status,
								timeStamp2String(dataT[i].atime,'yy/MM/dd hh:mm:ss'),
								 "",dataT[i].id,sid));
			}
		}else{
			$(".video-box-container").hide();
		}
	});
}

</script>

</script>
</html>